<template>
  <div style="margin-bottom: 20px; padding: 20px" v-for="review of props.dataList" :key="review.id">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <div style="width: 30px">
          <el-avatar :size="30" :src="review.user?.avatar" @error="true">
            <span style="font-size: 12px">{{ review.user?.nickname }}</span>
          </el-avatar>
        </div>
        <div style="margin-left: 10px; line-height: 30px; font-size: 14px; color: #1100ff">
          <span>{{ review.user?.nickname }}</span>
        </div>
      </div>
      <div style="color: #787878; font-size: 12px">
        发布于&nbsp;{{ titleUtil.formatDate(review.createTime) }}
      </div>
    </div>
    <div style="padding: 10px 0; margin: 10px 0 10px 40px">
      <div v-html="reviews(review.communityReviewContent)"></div>
    </div>
    <div style="font-size: 12px; color: #787878; margin-left: 40px">
      <div style="display: flex">
        <div class="like" @click="like(review?.id)">
          <i class="iconfont icon-aixin1"></i>&nbsp;{{ review.likeCount }}
        </div>
        <div style="margin-left: 20px" class="review" @click="showChild(review?.id)">
          <i class="iconfont icon-icon-test2"></i>&nbsp;回复
        </div>
      </div>
      <div v-if="reviewText.indexOf(review?.id) === -1 ? false : true" style="margin-top: 15px">
        <div class="inputDeep" style="width: 100%">
          <el-input
            v-model="content"
            maxlength="300"
            style="width: 100%"
            :placeholder="place(review.user?.nickname)"
            show-word-limit
            type="textarea"
          />
          <div style="width: 100%; text-align: right">
            <el-button
              size="small"
              style="width: 160px; height: 30px"
              @click="reviewChild(review?.id)"
              >发表</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { ref } from 'vue'
const props = defineProps({
  dataList: {
    type: Array,
    default: null
  }
})
const emit = defineEmits(['like', 'review'])

const content = ref('')

const place = (id) => {
  return '回复：' + id
}
const reviewText = ref([])

const reviews = (text) => {
  return text
}
const showChild = (id) => {
  if (reviewText.value.indexOf(id) === -1) {
    reviewText.value.push(id)
  } else {
    reviewText.value.pop(reviewText.value.indexOf(id), 1)
  }
}
// 点赞
const like = (id) => {
  emit('like', id)
}

const reviewChild = (id) => {
  emit('review', id, content.value)

  content.value = ''
}
</script>

<style scoped>
.item:hover {
  cursor: pointer;
}
.like:hover {
  color: #1100ff;
  cursor: pointer;
}
.review:hover {
  color: #1100ff;
  cursor: pointer;
}
</style>
